<template>
  <a-drawer
    title="新增收据编号规则"
    placement="right"
    :visible="visible"
    @close="closeModal"
    :width="600"
    :bodyStyle="{ height: 'calc(100% - 110px)' }"
  >
    <a-form
      ref="formRef"
      layout="vertical"
      @finish="onSubmit"
      :model="formState"
      :rules="rules"
    >
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="收据编号名称" name="name">
            <a-input
              placeholder="请输入收据编号名称"
              v-model:value="formState.name"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收据编号前缀" name="prefix">
            <a-input
              placeholder="请输入收据编号前缀"
              v-model:value="formState.prefix"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="开始编号" name="start_number">
            <a-input
              type="number"
              placeholder="请输入开始编号如000001"
              v-model:value="formState.start_number"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="结束编号" name="end_number">
            <a-input
              type="number"
              placeholder="请输入结束编号如999999"
              v-model:value="formState.end_number"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="应用楼宇" name="build_bind">
            <ChooseHousingResources
              checkType="build"
              @request="$utils.commonRequest"
              @getResult="getResult"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <div class="drawer-footer">
        <a-button class="mr-10" @click="closeModal">取消</a-button>
        <a-button type="primary" html-type="submit">保存</a-button>
      </div>
    </a-form>
  </a-drawer>
</template>

<script>
import {
  computed,
  defineComponent,
  reactive,
  ref,
  toRaw,
  watch,
  toRefs,
} from "vue";
import { message } from "ant-design-vue";
import request from "../../../../common/utils/request";
import utils from "../../../../common/utils/utils";
import store from "../../../../store";
import { ChooseHousingResources } from "bl-common-vue3";

export default defineComponent({
  name: "addReceipt",
  components: { ChooseHousingResources },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const formRef = ref();
    const formState = reactive({
      name: "",
      prefix: "",
      start_number: "",
      end_number: "",
      build_bind: null,
    });
    const rules = {
      name: [
        {
          required: true,
          message: "请输入收据编号名称",
        },
      ],
      prefix: [
        {
          required: false,
        },
      ],
      start_number: [
        {
          required: true,
          message: "请输入开始编号如000001",
        },
      ],
      end_number: [
        {
          required: true,
          message: "请输入结束编号如999999",
        },
      ],
      build_bind: [
        {
          required: true,
          message: "请选择应用楼宇",
        },
      ],
    };

    /** 选择房源 */
    const getResult = (info) => {
      const { villageList, buildList } = info;
      let list = [];
      if (villageList.length) {
        for (let village of villageList) {
          list = [...list, ...village.children];
        }
      }
      if (buildList.length) {
        list = [...list, ...buildList];
      }
      const buildData = utils.getProjectBuildByBuildList(list);
      formState.build_bind = {
        villageIds: buildData.villageId,
        buildIds: buildData.buildId,
        room: [],
      };
    };

    const closeModal = () => {
      context.emit("cancel");
    };

    const onSubmit = () => {
      if (formState.end_number.length !== formState.start_number.length) {
        message.warning("开始编号位数需和结束编号位数相同~");
        return;
      }
      if (Number(formState.end_number) <= Number(formState.start_number)) {
        message.warning("结束编号不能小于或等于开始编号~");
        return;
      }
      request.post("/org", "/receipt/add", formState).then((res) => {
        message.success("保存成功");
        context.emit("success");
      });
    };

    watch(
      () => props.visible,
      (value) => {
        if (!value) {
          formRef.value.resetFields();
        }
      }
    );

    return {
      closeModal,
      onSubmit,
      formRef,
      formState,
      rules,
      getResult,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(input::-webkit-outer-spin-button, input::-webkit-inner-spin-button) {
  -webkit-appearance: none;
}

:deep(input[type="number"]) {
  -moz-appearance: textfield;
}
</style>
